import './App.css'
import MainRouter from './router/MainRoute'
import Footer from './layout/Footer'
import Header from './layout/Header'
import Tags from './layout/Tags'
import Test from './layout/Test'
import RouterTag from './router/RouterTag'
import RouterTest from './router/RouterTest'
import { Provider } from './provider'
import Headers from './components/Headers';
import TodoList from './components/TodoList';
import './style.css';
import { useState } from 'react'
import TestTodoList from './components/testToDoList/todoList'
// 1.语法和设计思想上：
// 函数式组件是函数式编程思想，主打的是 immutable（不可变的）、没有副作用、引用透明等特点；
// 而类组件是面向对象编程思想，它主打的是继承、生命周期等核心概念。面向对象编程将属性和方法封装起来，屏蔽很多细节，不利于测试。而React的设计思路更推崇组合，而不是继承。在类组件中大量使用继承会造成组件过重，功能难以拆分。

// 2、生命周器上：

// 在函数组件中，并不存在生命周期，这是因为这些生命周期钩子函数都来自于继承的React.Component，
// 而函数式组件不需要继承。所以，如果用到生命周期，就只能使用类组件。

// 如果我们的组件在请求运行时更新。this.props 将会改变。showMessage方法从“最新”的 props 中读取 user；
// 而函数组件，本身就不存在this，props并不发生改变，因此同样是点击，alert的内容仍旧是之前的内容

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = (text) => {
    setTodos([
      ...todos,
      { id: Date.now(), text, completed: false }
    ]);
  };

  const toggleComplete = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      addTodo(inputValue);
      setInputValue('');
    }
  };
  const handleSubmitTest = (e) => {
    e.preventDefault();
    if (inputValuetest.trim()) {
      addTodotest(inputValuetest);
      setInputValuetest('');
    }
  };
  const [testTodo, usetestTodo] = useState([])
  const [inputValuetest, setInputValuetest] = useState('')
  const toDelete = (id) => {
    usetestTodo(testTodo.filter(item => item.id !== id))
  }
  const addTodotest = (text) => {
    usetestTodo([...testTodo, { id: Date.now(), text: text }])
  }

  return (
    <>

      <div>
        <Header></Header>
        <div className='MainWindows'>
          <MainRouter ></MainRouter>
        </div>
        <Footer></Footer>
        <h3>down</h3>

        <Provider something={'hello App'}>
          <Tags></Tags>
          <RouterTag></RouterTag>
        </Provider>
      </div>

      <div className="app">
        <Headers />
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="添加待办事项"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
          <button type="submit">添加</button>
        </form>
        <TodoList todos={todos} toggleComplete={toggleComplete} deleteTodo={deleteTodo} />
      </div>

      <h3>TestTodoList</h3>
      <form onSubmit={handleSubmitTest}>
        <input
          type="text"
          placeholder="添加待办事项"
          value={inputValuetest}
          onChange={(e) => setInputValuetest(e.target.value)}
        />
        <button type="submit">添加</button>
      </form>
      <TestTodoList todo={testTodo} toDelete={toDelete}></TestTodoList>
      <RouterTest></RouterTest>
      \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

      <Test></Test>


    </>
  )
}

export default App

